<div class="breadLine">
    <ul class="breadcrumb">
        <li><a href="#">Khách hàng</a> <span class="divider">&gt;</span></li>                
        <li class="active">Thống kê</li>
    </ul>
</div>

<div class="workplace">  
    
    <div style="position: absolute;right: 317px;top: 35px;font-size: 18px;">Chọn thời gian</div>
    <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;position: absolute;right: 20px;top: 30px;">
          <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          <span></span> <b class="caret"></b>
          <input type="hidden" id="times" value="" />
    </div> 
    <div class="page-header" style="margin-top: 0px;">
        <h1 style="width: 60%;border-bottom: none 0;"><small style="color: #30557f;">Chi tiết chiến dịch: <strong><?php echo $title?></strong></small></h1>
        
    </div> 
    <div class="row-fluid">
        <div class="span12" style="margin-top: -30px;">
            <div class="block" style="height: 50px;border-top: 1px solid #ccc;">                        
                <!-- <a href="#dModal" role="button" class="btn" data-toggle="modal">Xuất file</a> -->
                <a></a>
                <div id="dModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" style="width: 200px;left: 65%">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Default</h3>
                    </div>
                    <div class="modal-body">
                        <ul>
                            <li>Xuất file doc</li>
                            <li>Xuất file excel</li>
                            <li>Xuất file pdf</li>
                        </ul>
                    </div>
                </div> 
                
                <div style="float: right;">
                    <span>Thống kê theo</span>
                    <select id="type" onchange="getChart();">
                        <?php echo $selectType?>
                    </select>
                </div>
                     
            </div>
        </div>
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
      
      <div class="row-fluid">
        <div class="span12" style="margin-top: 65px;" id="page">
            <div class="block" style="border-radius: 5px">                        
               <div class="block-fluid" id="page_show">
                    <table cellpadding="0" cellspacing="0" width="100%" class="table">
                        <thead>
                            <tr style="border-top: 1px solid #ccc">                                    
                                <th colspan="5" style="background: #FFF;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Thống kê số lượt hiển thị trên các thiết bị</center></th>                                    
                            </tr>
                            <tr>                                    
                                <th width="auto">STT</th>
                                <th width="50%">Tên/phiên bản hệ điều hành</th>
                                <th width="25%">Số lượng ( Lượt )</th> 
                                <th width="15%">Tỷ lệ ( Phần trăm )</th>
                                                                    
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th colspan="2" style="background: #FFF;display: table-cell;vertical-align: middle;padding: 10px;border-bottom: none;font-size: 16px;font-weight: normal;text-align: right;">Tổng số:</th>
                                <th width="auto" colspan="2" style="background: #FFF;display: table-cell;vertical-align: middle;"><?php echo $statics_os_table['tong_os']?></th>
                                
                            </tr>
                        </tfoot>
                        <tbody>
                        <?php $cf = 1; foreach($statics_os_table AS $el=>$le):?>
                        <?php if($el != 'tong_os'):?>
                            <tr>                                    
                                <td><center><?php echo $cf++;?></center></td>
                                <td><?php echo $el == 'Other' ? 'Không xác định' : $el ?> </td> 
                                <td><?php echo number_format($le, 0, '', '.')?> </td>
                                <td><?php echo round(($le * 100) / $statics_os_table['tong_os'],1)?> </td>
                            </tr>
                        <?php endif;?>
                        <?php endforeach;?>                    
                        </tbody>
                    </table>
                </div> 
            </div>
        </div>
    </div>
</div>
<script src="<?php echo $baseurl.'public/theme/member/'?>js/chart/highcharts.js"></script>
<script src="<?php echo $baseurl.'public/theme/member/'?>js/chart/modules/highcharts-3d.js"></script>
<script src="<?php echo $baseurl.'public/theme/member/'?>js/chart/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    
    Highcharts.theme = {
        colors: ['#058DC7', '#50B432' ,'#64E572', 
                 '#FF9655', '#FFF263','#ED561B' ,'#24CBE5','#DDDF00', '#6AF9C4'],
        chart: {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            },
        },
    };
    
    
    Highcharts.setOptions(Highcharts.theme);

    /**
    *
    *
    * Tỷ lệ lượt hiển thị trên thiết bị
    *
    */
    $('#container_device').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                style: {
                    fontFamily: 'Tahoma,Arial,sans-serif'
                }
            },
            title: {
                text: 'Tỷ lệ hiển thị trên thiết bị'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Tổng số',
                data: [
                    <?php foreach($statics_os_chart AS $le=>$el):?>
                    <?php if($le != 'tong_os'):?>
                        ['<?php echo $le?>', <?php echo $el?>],
                    <?php endif;?>
                    <?php endforeach;?>
                ]
            }]
        });
    });
    
    
   
</script>

<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            
            chart: {
                type: 'line'
            },
            title: {
                text: 'Số lượt hiển thị trên các hệ điều hành',
                x: -20 //center
            },
            xAxis: {
                categories: [<?php $ft = ''; foreach($statics_os_chart AS $le=>$el):?><?if($le != 'tong_os'):?><?php $ft .= ",'".$le."'";?><?php endif;?><?php endforeach;?> <?php echo substr($ft, 1);?>]
                
            },
            yAxis: {
                title: {
                    text: 'Số lượt'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ''
            },

            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            
        series: [{
            type: 'column',
            name: 'Tổng số ',
            data: [<?php $ft = ''; foreach($statics_os_chart AS $le=>$el):?><?if($le != 'tong_os'):?><?php $ft .= ",".$el;?><?php endif;?><?php endforeach;?> <?php echo substr($ft, 1);?>]
        }, {
            type: 'spline',
            name: 'Tổng số',
            data: [<?php $ft = ''; foreach($statics_os_chart AS $le=>$el):?><?if($le != 'tong_os'):?><?php $ft .= ",".$el;?><?php endif;?><?php endforeach;?> <?php echo substr($ft, 1);?>],
            marker: {
            	lineWidth: 2,
            	lineColor: Highcharts.getOptions().colors[3],
            	fillColor: 'white'                
            }
        }]
        
        });
    });
    

</script>


<link href="<?php echo $baseurl.'public/theme/member/picker/'?>bootstrap.css" rel="stylesheet">
<link href="<?php echo $baseurl.'public/theme/member/'?>font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="<?php echo $baseurl.'public/theme/member/picker/'?>daterangepicker-bs3.css" />
<script type="text/javascript" src="<?php echo $baseurl.'public/theme/member/picker/'?>moment.js"></script>
<script type="text/javascript" src="<?php echo $baseurl.'public/theme/member/picker/'?>daterangepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  var cb = function(start, end, label) {
    //console.log(start.toISOString(), end.toISOString(), label);
    $('#reportrange span').html(start.format('DD/MM/YYYY HH:mm') + ' - ' + end.format('DD/MM/YYYY HH:mm'));
    $("#times").val(start.format('YYYYMMDDHHmm00') + '|' + end.format('YYYYMMDDHHmm00'));
    getChart();
  }

  var optionSet1 = {
    startDate: moment().subtract('days', 0),
    endDate: moment(),
    minDate: '01/01/2014',
    maxDate: '12/31/2030',
    dateLimit: { days: 60 },
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: true,
    timePickerIncrement: 1,
    timePicker12Hour: true,
    ranges: {
       'Today': [moment().startOf('day'), moment()],
       'Yesterday': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
       'Last 7 Days': [moment().subtract('days', 6).startOf('day'), moment().endOf('day')],
       'Last 30 Days': [moment().subtract('days', 29).startOf('day'), moment().endOf('day')],
       'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month')],
       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    },
    opens: 'left',
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-small btn-primary',
    cancelClass: 'btn-small',
    format: 'DD/MM/YYYY HH:mm',
	timePicker: true,
    separator: ' to ',
    locale: {
        applyLabel: 'Submit',
        cancelLabel: 'Clear',
        fromLabel: 'From',
        toLabel: 'To',
        customRangeLabel: 'Custom',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
        monthNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        firstDay: 1
    }
  };

  var optionSet2 = {
    startDate: moment().subtract('days', 7),
    endDate: moment(),
    opens: 'left',
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
       'Last 7 Days': [moment().subtract('days', 6), moment()],
       'Last 30 Days': [moment().subtract('days', 29), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    }
  };

  $('#reportrange span').html('<?php echo $time_select?>');//alert('sdf');
  $('#times').val('<?php echo $time?>');
  $('#reportrange').daterangepicker(optionSet1, cb);

  $('#reportrange').on('show.daterangepicker', function() { console.log("show event fired"); });
  $('#reportrange').on('hide.daterangepicker', function() { console.log("hide event fired"); });
  $('#reportrange').on('apply.daterangepicker', function(ev, picker) { 
    console.log("apply event fired, start/end dates are " 
      + picker.startDate.format('DD/MM/YYYY HH:mm') 
      + " to " 
      + picker.endDate.format('DD/MM/YYYY HH:mm')
    ); 
  });
  $('#reportrange').on('cancel.daterangepicker', function(ev, picker) { console.log("cancel event fired"); });

  $('#options1').click(function() {
    $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
  });

  $('#options2').click(function() {
    $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
  });

  $('#destroy').click(function() {
    $('#reportrange').data('daterangepicker').remove();
  });

});

function getChart()
{
    var time = $('#times').val();
    var type = $("#type").val();
    $(".preload").css('display','block');
    if(type == 0)
    {
        var link = 'detail-campaign';
    }else if(type == 1)
    {
        var link = 'statics-browser';
    }else if(type == 2)
    {
        var link = 'statics-device';
    }else if(type == 3)
    {
        var link = 'statics-os';
    }else if(type == 4)
    {
        var link = 'statics-place';
    }
    window.location = '<?php echo $baseurl;?>'+link+'?id=<?php echo $id?>&type='+type+'&time='+time+'&time_select='+$('#reportrange span').html();
}

</script>
